<template>
  <el-card class="permission-list-card">
    <template #header>
      <div class="card-header">
        <span>权限列表</span>
      </div>
    </template>
    
    <el-table :data="permissionData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" sortable />
      <el-table-column prop="name" label="权限名称" width="150" />
      <el-table-column prop="code" label="权限标识" width="150" />
      <el-table-column prop="type" label="权限类型" width="120">
        <template #default="{ row }">
          <el-tag :type="row.type === 'menu' ? '' : 'success'">
            {{ row.type === 'menu' ? '菜单权限' : '操作权限' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="路径" />
      <el-table-column label="操作" width="180">
        <template #default>
          <el-button size="small">编辑</el-button>
          <el-button size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="30"
        :page-size="10"
      />
    </div>
  </el-card>
</template>

<script setup>
const permissionData = [
  {
    id: 1,
    name: '首页访问',
    code: 'home',
    type: 'menu',
    path: '/'
  },
  {
    id: 2,
    name: '用户管理',
    code: 'user',
    type: 'menu',
    path: '/user'
  },
  {
    id: 3,
    name: '用户列表',
    code: 'user:list',
    type: 'menu',
    path: '/user/list'
  },
  {
    id: 4,
    name: '新增用户',
    code: 'user:add',
    type: 'button',
    path: ''
  },
  {
    id: 5,
    name: '权限管理',
    code: 'permission',
    type: 'menu',
    path: '/permission'
  }
]
</script>

<style scoped>
.permission-list-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 16px;
  font-weight: bold;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>